<template>
<div>
  <div class="select-role t1" @click="getFamilys">
     <i class="iconfont icon-user2"></i>
     <span>{{username}}</span>
  </div>
   <mu-dialog :open="sel_family_dialog" dialogClass="fullwidth" @close="close">
        <ul class="rfamilylist">
          <li v-for="(value,index) in familys" class="familyitem" :key="index" @click="selperson(value)">
            <img src="../assets/child_man.png" v-if="value.sex==1 && (jsGetAge(value.dob.slice(0, 10)) <= 14)"/>
            <img src="../assets/child_women.png" v-if="value.sex==2 && (jsGetAge(value.dob.slice(0, 10)) <= 14)"/>
            <img src="../assets/middle_man.png" v-if="value.sex==1 && (jsGetAge(value.dob.slice(0, 10)) > 14) && (jsGetAge(value.dob.slice(0, 10)) <= 60)"/>
            <img src="../assets/middle_women.png" v-if="value.sex==2 && (jsGetAge(value.dob.slice(0, 10)) > 14) && (jsGetAge(value.dob.slice(0, 10)) <= 60)"/>
            <img src="../assets/old_man.png" v-if="value.sex==1 && (jsGetAge(value.dob.slice(0, 10)) > 60)"/>
            <img src="../assets/old_women.png" v-if="value.sex==2 && (jsGetAge(value.dob.slice(0, 10)) > 60)"/>
            <span class="runame">{{value.personName}}</span>
          </li>
        </ul>
    </mu-dialog>
</div>
</template>

<script>
import {commonAjax, PLATFORM_PREFIX} from '../api/api'

export default {
  data () {
    return {
      familys: [],
      sel_family_dialog: false,
      familyPerson: JSON.parse(localStorage.familyPerson || '{}'),
      username: ''
    }
  },
  mounted () {
    this.username = this.familyPerson.personName
  },
  methods: {
    selperson (val) {
      this.sel_family_dialog = false
      this.username = val.personName
      localStorage.familyPerson = JSON.stringify(val)
      this.$emit('liclick', val)
    },
    getFamilys () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([true], `${PLATFORM_PREFIX}.familyService`, 'getFamilyMemberList').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.sel_family_dialog = true
          this.familys = res.data.body || []
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        this.$store.commit('UPDATE_TOAST', {
          message: '请求服务器失败'
        })
      })
    },
    close () {
      this.sel_family_dialog = false
    },
    jsGetAge (strBirthday) {
      let returnAge
      let strBirthdayArr = strBirthday.split('-')
      let birthYear = strBirthdayArr[0]
      let birthMonth = strBirthdayArr[1]
      let birthDay = strBirthdayArr[2]

      let d = new Date()
      let nowYear = d.getFullYear()
      let nowMonth = d.getMonth() + 1
      let nowDay = d.getDate()

      if (nowYear === birthYear) {
        returnAge = 0
      } else {
        var ageDiff = nowYear - birthYear
        if (ageDiff > 0) {
          if (nowMonth === birthMonth) {
            var dayDiff = nowDay - birthDay
            if (dayDiff < 0) {
              returnAge = ageDiff - 1
            } else {
              returnAge = ageDiff
            }
          } else {
            var monthDiff = nowMonth - birthMonth
            if (monthDiff < 0) {
              returnAge = ageDiff - 1
            } else {
              returnAge = ageDiff
            }
          }
        } else {
          returnAge = -1
        }
      }
      return returnAge
    }
  }
}
</script>

<style lang="less">
.select-role {
  position: absolute;
  right: 1em;
  top: 4px;
  z-index: 999;
  .iconfont {
    vertical-align:middle;
    font-size: 1.4em;
  }
  span {
    line-height: 3;
  }
}

.rfamilylist{
  display:flex;
  -webkit-display: flex;
  flex-wrap:wrap;
  -webkit-flex-wrap: wrap;
}
.rfamilylist>li{
  width:33.333%;
  padding:5px;
}
.familyitem>img{
  width:100%;
}
.familyitem>span{
  display:block;
  width:100%;
  text-align:center;
}
.fullwidth{
  width:100%;
  align-self: flex-start;
}
</style>
